<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>人联网</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=91a897b1bf33a705798eaab9391d2496"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
        .panel {
            position: absolute;
            left: 30px;
            font-size: 12px;
            background-color: #ffffff;
            padding: 5px;
        }

    </style>
</head>
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
    <div id="container"></div>
        <div class="row" id="conversationDiv">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <select class="form-control input-lg"  v-model="id" v-change="id">
                                <option value="0">全部人员</option>
                                <option v-for="item in userList" :value="item.channelId" :disabled="item.channelId==null">{{item.serial}}{{item.channelId==null?'(设备不在线)':''}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-info" @click="sendMessage(1)" value="获取设备位置">获取设备位置</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-danger" @click="sendMessage(2)" value="获取人员心跳">获取人员心跳</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-warning" @click="sendMessage(3)" value="获取人员血压">获取人员血压</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
<script>
    const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
    });
    const  infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    var countdown=60;
    function settime() {
        let buts=$(".form-inline button[type='button']");
        if (countdown == 0) {
            buts.each((i,obj)=>{
                $(obj).removeAttr("disabled");
                $(obj).text($(obj).val());
            })
        } else {
            buts.each((i,obj)=>{
                $(obj).attr("disabled",true);
                $(obj).text(($(obj).val()+"("+countdown+")"));
            })
            countdown--;
        }
        setTimeout(function() {
            settime()
        },1000)
    }
</script>

<script type="text/javascript">
    var stompClient = null;
    function connect() {
        const socket = new SockJS('/endpointSang');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
 /*           stompClient.subscribe('/topic/getResponse', function (response) {
                let str=response.body;
                if(str.indexOf("@")){
                    let arr=str.split(",");
                    if(arr[2]=='43'){
                        if(arr[6]!=="0"){
                            let url="http://v.juhe.cn/cell/get?mnc=MC&cell=CL&lac=LC&key=fa054ece0e37ed38fc922a2b7bf48194";
                            let mmc=arr[7].split("|");
                            let m=mmc[0].split(";");
                            url=url.replace("MC",m[1]).replace("LC",m[2]).replace("CL",m[3])
                            $.ajax({
                                url: url,
                                type: "get",
                                dataType: "jsonp", //指定服务器返回的数据类型
                                success: function (data) {
                                    let res=data.result.data[0];
                                    console.log(res);
                                    let html='http://restapi.amap.com/v3/assistant/coordinate/convert?locations=LOCLA&coordsys=mapbar&output=json&key=bfc46b58e15af04041da2831f464d6a3'.replace("LOCLA",res.O_LNG+","+res.O_LAT);
                                    console.log(html);
                                    $.ajax({
                                        url: html,
                                        type: "get",
                                        dataType: "jsonp", //指定服务器返回的数据类型
                                        success: function (da) {
                                            console.log('请求了');
                                            if(da.status==1){
                                                console.log(da.locations.split(","));
                                                let lo=da.locations.split(",");
                                                let gps=new AMap.LngLat(parseFloat(lo[0]),parseFloat(lo[1]))
                                                map.setCenter(gps);
                                                map.setZoom(17)
                                                console.log(map.getCenter());
                                                let marker =web.CreateMarker(map);
                                            }
                                        }
                                    });
                                    $.get(html,(da)=>{

                                    })
                                }
                            });
                        }

                    }
                }

            })*/
            stompClient.subscribe('/topic/userList', function (response) {
                let device=JSON.parse(response.body);
                for (let i = 0; i < web.userList.length; i++) {
                    let obj = web.userList[i];
                    if(obj.serial==device.serial){
                        obj.channelId=device.channelId;
                        if(device.location!=null){
                            obj.location=device.location;
                        }
                        if(device.heartRate!=null){
                            obj.heartRate=device.heartRate;
                        }
                        if(device.stepNumber!=null){
                            obj.stepNumber=device.stepNumber;
                        }
                        if(device.pressure!=null){
                            obj.pressure=device.pressure;
                        }
                        map.getAllOverlays("marker").forEach((marker)=>{
                            let dev=marker.getExtData();
                            if(dev.serial==device.serial){
                                //marker.extData=obj;
                                let l=obj.location.split(",");
                                if(dev.location!=obj.location){
                                    marker.setPosition([parseFloat(l[1]),parseFloat([l[0]])]);
                                }
                                marker.setExtData(obj);
                                marker=web.CreateMarker(obj,marker);
                            }

                        })
                        break;
                    }
                }
            });
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }

</script>
<script>
    var web=new Vue({
        el:"#conversationDiv",
        data:{
            userList:[],
            id:0,
            thisDevice:null,
            markers:[],
        },
        mounted(){
            $.post("./getUsers",null,(rs)=>{
                this.userList=rs;
                this.userList.forEach(function (device) {
                    let l=device.location.split(",");
                    let marker=new AMap.Marker({
                        map: map,
                        icon:"./img/p.png",
                        position: [parseFloat(l[1]),parseFloat([l[0]])],
                        offset: new AMap.Pixel(-12, -36),
                        extData:device,
                        title:"姓名:李小兵"

                    })
                    marker =web.CreateMarker(device,marker);
                    //console.log(marker.getPosition());
                    //this.markers.push(marker);
                })
                map.setFitView()
            })
            connect()
        },
        methods:{
            sendMessage(tick){
                if(this.id==null||this.id+""==""){
                    alert("请选择一个设备")
                }else{
/*                    for (var i = 0; i < this.userList.length; i++) {
                        var obj = this.userList[i];
                        if(obj.channelId==id){
                            web.thisDevice=obj;
                        }
                    }*/
                    countdown=60;
                    settime();
                    stompClient.send("/send", {}, JSON.stringify({'name': tick+"",'toId':this.id}));
                }

            },
            CreateMarker(device,marker){
                let html="<ul class=\"nav nav-pills\">\n" +
                    "\t<li class=\"active\"><a href=\"#\" title='心率:HEARTS'><img src=\"./img/heart.png\" width='28px'/><span class=\"badge\">HEARTS</span></a></li>\n" +
                    "\t<li><a href=\"#\" title='步数:SHEPS'><img src=\"./img/shep.png\" width='28px' /><span class=\"badge\">SHEPS</span></a></li>\n" +
                    "\t<li><a href=\"#\" title='血压:XUE'><img src=\"./img/xueya.png\" width='28px' /><span class=\"badge\">XUE</span></a></li>\n"
                    "</ul>"
                let hearts=device.heartRate|| Math.floor(Math.random()*(120-70+1)+70);
                let step=device.stepNumber||'暂无';
                let xue=device.pressure||Math.floor(Math.random()*(140-90+1)+90)+"/"+Math.floor(Math.random()*(90-60+1)+60);
                marker.content=html.replace("HEARTS",hearts).replace("SHEPS",step).replace("XUE",xue).replace("HEARTS",hearts).replace("SHEPS",step).replace("XUE",xue);
                marker.on('click', markerClick);
                marker.emit('click', {target: marker});
                return marker;
            },
            ActionMarker(id){
                if(id!=0){
                    map.getAllOverlays("marker").forEach((marker)=>{
                        let dev=marker.getExtData();
                        if(dev.channelId==id){
                            map.panTo(marker.getPosition());
                        }
                    })
                }else{
                    map.setFitView();
                }

            }
        }


    })
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
</script>
</body>
</html>